
//获取搜索按钮
var searchBtn = document.querySelector('.right>.button');
//获取输入框
var inputEle = document.querySelector('.right>.text');
//获取localStorage中存储的数据
var userinfo=JSON.parse(localStorage.getItem('userinfo'))

//获取到登录用户的标签
document.querySelector('.username').innerHTML=userinfo.name
//点击搜索按钮, 发起ajax请求, 传参数给服务器端, 服务器端返回搜索的结果
searchBtn.onclick = ()=>{
    axios.get( '/user/search', { params:{ searchkey: inputEle.value  }  } ).then((res)=>{
        render( res.data.list );
        console.log(res.data);
    })
}
var caozuo=document.querySelector('tbody')
console.log(caozuo);
caozuo.onclick=(e)=>{
  if( e.target.tagName=="SPAN" && e.target.classList.contains('shanchu')){
   console.log('点击了删除按钮');
   //点击删除按钮，发起删除请求
   axios.post('/user/delete',{ phone: e.target.dataset.phone }).then((res)=>{
       console.log(res.data);
       //如果想要在发请求给服务器,删除成功之后, 同时让页面也看到删除后的效果,有两种方案
       //方案一: 本地删除这个dom节点
       //e.target.parentNode.parentNode.remove();
       //方案二: 让删除接口 返回删除后的新数据, 本地调用render方法重新渲染.
       render(res.data.list)
   })
  }
}
//渲染列表
function render(data){
    var str = ''
    
    str = data.map((item,index)=>{
        return `<tr class="caozuo">
                    <td>${item.email}</td>
                       <td>${item.name}</td>
                       <td>${item.phone}</td>
                       <td>${item.ingroup}</td>
                       <td>${item.isadmin?'是':'否'}</td>
                       <td> <span class="statusok">${item.status?'正常':'异常'}</span> </td>
                       <td> <span>编辑</span> <span class="shanchu" data-phone="${item.phone}"}>删除</span> </td>
                   </tr>`
    }).join('')

    if( str == '' ){
        str = '<ul style="text-align:center;color:red">未查询到数据!</ul>'
    }
    document.querySelector('tbody').innerHTML = str;
    

}

//axios是从axios.min.js文件中暴露的 用来发送ajax请求的一个对象
var page =1
var before=document.querySelector('.before')
console.log(before);
axios.get('/user/list', { params: { page:1,count:1 }  } ).then((res)=>{
    render( res.data.list );
    console.log(res.data);
})
before.onclick=()=>{
   if(page>1){
    axios.get('/user/list', { params: { page:--page,count:1 }  } ).then((res)=>{
        render( res.data.list );
        console.log(res.data);
    })
   }
}
var next=document.querySelector('.next')
next.onclick=()=>{
    axios.get('/user/list', { params: { page:++page,count:1 }  } ).then((res)=>{
        render( res.data.list );
        console.log(res.data);
    })
}
// axios.post('/user/login', { phone:'13611129070',pass:'1234' } ).then((res)=>{
//     console.log(res.data);
// })

